<template>
    <div class="container">
        <div class="mainBox">
            <!-- 代表作 -->
            <template v-if="privacy['repres']">
                <repres-box :mid="props.mid" type="repres"  @isShow="isShow"></repres-box>
            </template>
            <!-- 置顶 -->
            <template v-if="privacy['topping']">
                <topping :mid="props.mid" @isShow="isShow" type="topping"></topping>
            </template>
            <!-- 视频 -->
            <up-video-box :mid="props.mid" :is-btn="true" type="video">
                <template #title>
                    <span>TA的视频</span>
                </template>
                <template #nullWarn>
                    <span></span>
                </template>
            </up-video-box>
            <!-- 合集 -->
            <template v-for="item in list?.seasons_list" :key="item">
                <video-list :mid="item.meta.mid" :list="item.archives" :total="item.meta.total" v-if="item.archives.length">
                    <template #title>
                        <span>{{ item.meta.name }}</span>
                    </template>
                </video-list>
            </template>
            <!-- 专栏 -->
            <articles-list :mid="props.mid"></articles-list>
            <!-- 另一个合集 -->
            <template v-for="item in list?.series_list" :key="item">
                <video-list :mid="item.meta.mid" :list="item.archives" :total="item.meta.total" v-if="item.archives.length">
                    <template #title>
                        <span>{{ item.meta.name }}</span>
                    </template>
                </video-list>
            </template>
            <!-- 收藏 -->
            <template v-if="privacy['stow']" >
                <up-video-box :mid="props.mid" :is-btn="true" type="stow" @isShow="isShow" :isAllBtn="true">
                    <template #title>
                        <span>TA的收藏夹</span>
                    </template>
                    <template #nullWarn>
                        <span>空间主人还没有收藏视频~~</span>
                    </template>
                </up-video-box>
            </template>
            <!-- 订阅番剧 -->
            <template v-if="privacy['bangumi']" >
                <up-video-box :mid="props.mid" :is-btn="true" type="bangumi" @isShow="isShow" :isAllBtn="true">
                    <template #title>
                        <span>订阅番剧</span>
                    </template>
                    <template #nullWarn>
                        <span>空间主人还没有订阅过番剧~~</span>
                    </template>
                </up-video-box>
            </template>
            <!-- 投币 -->
            <template v-if="privacy['coinVideo']">
                <up-video-box :mid="props.mid" :is-btn="false" type="coinVideo"  @isShow="isShow">
                    <template #title>
                        <span>最近投币的视频</span>
                    </template>
                    <template #nullWarn>
                        <span>空间主人最近一个月没有投过硬币~~</span>
                    </template>
                </up-video-box>
            </template>
            <!-- 点赞 -->
            <template v-if="privacy['likeVideo']">
                <up-video-box :mid="props.mid" :is-btn="false" type="likeVideo" @isShow="isShow">
                    <template #title>
                        <span>最近点赞的视频</span>
                    </template>
                    <template #nullWarn>
                        <span>空间主人最近一个月没有点赞过视频~~</span>
                    </template>
                </up-video-box>
            </template>
        </div>
        <div class="upInfoBox">
            <template v-if="store.state.upInfo?.official?.title">
                <bili-official :official="store.state.upInfo?.official"></bili-official>
            </template>
            <template v-if="store.state.upInfo?.elec?.show_info.state === 1 || store.state.upInfo?.elec?.show_info.state === 2">
                <up-elec :mid="store.state.upInfo.mid" :type="store.state.upInfo.elec.show_info.state" :cover="store.state.upInfo?.elec.show_info.icon"></up-elec>
            </template>

            <notice-box v-if="notice">
                <template #header>
                    <span>公告</span>
                </template>
                <template #content>
                    <span style="white-space: pre-line;text-align:left">{{ notice }}</span>
                </template>
            </notice-box>
            <notice-box v-if="reservation">
                <template #header>
                    <span>预约</span>
                </template>
                <template #content>
                    <div v-for="item in reservation" :key="item.sid" class="reservation">
                        <p>
                            <span>{{ item.name }}</span>
                            <span>{{ item.total }}人预约</span>
                        </p>
                        <p v-if="item.is_follow === 0">
                            <img src="../../../assets/up/ld.png" />
                            <span>预约</span>
                        </p>
                        <p v-else style="background:#E7E7E7;color:#999999" >
                            <span>已预约</span>
                        </p>
                    </div>
                        
                </template> 
            </notice-box>
            <template v-if="store.state.upInfo?.live_room">
                <up-live-room :room="store.state.upInfo?.live_room" :mid="store.state.upInfo?.mid" :is_followed="store.state.upInfo?.is_followed"></up-live-room>
            </template>
            <bili-up-info   :birth="store.state.upInfo?.birthday" 
                            :uid="store.state.upInfo?.mid" 
                            :school="store.state.upInfo.school?.name" 
                            :tags="store.state.upInfo?.tags"
                        ></bili-up-info>
    </div>
   
</div> 
</template>

<script lang="ts" setup>
import { get } from '@/http/axios'
import { onBeforeMount,ref, reactive } from 'vue'
import { useStore } from 'vuex'
import { getWbiKeys,encWbi } from '@/api/getVideo'
import { biliOfficial, biliUpInfo, upLiveRoom, noticeBox, upElec, upVideoBox, topping, videoList, articlesList, represBox } from './index'

interface Props{
    mid:number
}
const props = defineProps<Props>()
const store = useStore()
let list = ref()
let notice = ref<string>()      //公告
let reservation = ref<Array<any>>() //预约
let privacy = reactive({
    likeVideo:true,
    coinVideo:true,
    stow:true,
    topping:true,
    bangumi:true,
    repres:true
})
onBeforeMount(() => {
    getNotice()
    getReservation()
    initListData()
})
function getNotice(){
    get('/x/space/notice?mid=' + props.mid + '&web_location=333.999')
    .then(res =>{
        notice.value = res.data
    })
}
function getReservation(){
    const wbi_keys = getWbiKeys(store)
   const query = encWbi(
    {
        vmid:props.mid,
        web_location:'333.999' 	
   },
        wbi_keys.img_key, 
        wbi_keys.sub_key
   )
    get('/x/space/reservation?' + query )
    .then(res =>{
        reservation.value = res.data
    })
}
function initListData() {
    get('/x/polymer/web-space/home/seasons_series?mid=' + props.mid + '&page_num=1&page_size=10 ')
    .then(res => {
        list.value = res.data.items_lists
    })
    .catch(res => {
        alert('合集信息加载失败')
    })
}
/**
 * 
 * @param type 类型
 * @param flag 是否隐藏
 * 在组件中调用接口 如果没有数据返回则视为隐藏 不做展示
 */
function isShow(type:string,flag:boolean){
    privacy[type] = flag
}
</script>

<style lang="scss" scoped>
p{
    padding: 0;
    margin: 0;
}
.container{
    min-width: 1300px;
    margin-top: 30px;
    display: flex;
    justify-content: space-between;
    align-items: start;
}
.reservation{
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
    & p:nth-child(1){
        display: flex;
        flex-direction: column;
        width: 80%;
        text-align: left;
    }
    & p:nth-child(1) span:nth-child(2){
        color: #99A2AA;
    }
    & p:nth-child(2){
        height: 20px;
        padding: 2px 8px;
        border-radius: 4px;
        line-height: 16px;
        background: #00A1D6;
        color: white;
        white-space: nowrap;
        @include flexRowCenter;
        cursor: pointer;
    }
    & p:nth-child(2) img:nth-child(1){
        width: 20px;
    }
}
.mainBox{
    background: white;
    border: 1px solid var(--el-border-color);
    border-radius: 4px;
    padding: 20px;
    width: 69%;
    display: flex;
    flex-direction: column;
    gap: 20px 0;
}
.upInfoBox{
    display: flex;
    flex-direction: column;
    gap: 20px 0;
    width: 26%;
}
</style>